<template>
    <view class="content b-t">
        <view class="list b-b" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
            <view class="wrapper">
                <view class="address-box">
                    <text v-if="item.default" class="tag">默认</text>
                    <text class="address">{{ item.addressName }} {{ item.area }}</text>
                </view>
                <view class="u-box">
                    <text class="name">{{ item.name }}</text>
                    <text class="mobile">{{ item.mobile }}</text>
                </view>
            </view>
            <text class="yticon icon-bianji" @click.stop="addAddress('edit', item)"></text>
        </view>
        <button class="add-btn" @click="addAddress('add')">新增地址</button>
    </view>
</template>

<script setup>
// 获取全局变量的引用
const instance = getCurrentInstance();
const gProperties = instance.appContext.config.globalProperties;
const source = ref(0);
const addressList = reactive([
    {
        name: '刘晓晓',
        mobile: '18666666666',
        addressName: '贵族皇仕牛排(东城店)',
        address: '北京市东城区',
        area: 'B区',
        default: true
    },
    {
        name: '刘大大',
        mobile: '18667766666',
        addressName: '龙回1区12号楼',
        address: '山东省济南市历城区',
        area: '西单元302',
        default: false
    }
]);
//选择地址
let checkAddress = (item) => {
    if (this.source == 1) {
        //this.$api.prePage()获取上一页实例，在App.vue定义
        gProperties.$api.prePage().addressData = item;
        uni.navigateBack();
    }
};
let addAddress = (type, item) => {
    uni.navigateTo({
        url: `/pages/address/addressManage?type=${type}&data=${JSON.stringify(item)}`
    });
};
//添加或修改成功之后回调
const refreshList = (type, data) => {
    //添加或修改后事件，(unshift)这里直接在最前面添加了一条数据，实际应用中直接刷新地址列表即可
    console.log('refreshList===${data}' + JSON.stringify(data));
    addressList.unshift(data);
    console.log('==>' + JSON.stringify(addressList));
};
onShow(() => {
    // 监听数据变化
    console.log('onShow--');
    uni.$once('address_refresh_list', function (result) {
        refreshList(result.type, result.content);
    });
});
function goCurrent2() {
    console.log('goCurrent');
}
</script>
<style lang="scss" scoped>
page {
    padding-bottom: 120upx;
}
.content {
    position: relative;
}
.list {
    display: flex;
    align-items: center;
    padding: 20upx 30upx;
    background: #fff;
    position: relative;
}
.wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.address-box {
    display: flex;
    align-items: center;
    .tag {
        font-size: 24upx;
        color: $base-color;
        margin-right: 10upx;
        background: #fffafb;
        border: 1px solid #ffb4c7;
        border-radius: 4upx;
        padding: 4upx 10upx;
        line-height: 1;
    }
    .address {
        font-size: 30upx;
        color: $font-color-dark;
    }
}
.u-box {
    font-size: 28upx;
    color: $font-color-light;
    margin-top: 16upx;
    .name {
        margin-right: 30upx;
    }
}
.icon-bianji {
    display: flex;
    align-items: center;
    height: 80upx;
    font-size: 40upx;
    color: $font-color-light;
    padding-left: 30upx;
}

.add-btn {
    position: fixed;
    left: 30upx;
    right: 30upx;
    bottom: 16upx;
    z-index: 95;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 690upx;
    height: 80upx;
    font-size: 32upx;
    color: #fff;
    background-color: $base-color;
    border-radius: 10upx;
    box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
